.search-page {
  font-size: .14rem;

  .search {
    display: flex;
    padding: .08rem .32rem .06rem 0;

    &-back-link {
      text-decoration: none;
    }

    &-back-icon {
      width: .48rem;
      line-height: .32rem;
      font-size: .18rem;
      text-align: center;
      color: #242424;
    }

    &-area {
      flex: 1;
      display: flex;
      line-height: .32rem;
      background-color: #F5F9FA;
      border-radius: .16rem;

      .search-icon {
        width: .3rem;
        line-height: .32rem;
        text-align: center;
      }

      .search-input {
        flex: 1;
        border: none;
        background: none;
        outline: none;
        color: #242424;
        padding-right: .2rem;
      }

      .search-input::placeholder {
        color: #B1B1B1;
      }
    }
  }

  .title {
    padding: .16rem .18rem .11rem .1rem;
    color: #B1B1B1;
    line-height: .22rem;
    position: relative;

    &-close {
      position: absolute;
      right: .2rem;
      top: .16rem;
      font-size: .2rem;
    }
  }

  .list {
    list-style-type: none;
    overflow: hidden;
    padding: 0 .1rem;

    &-item {
      float: left;
      margin-right: .14rem;
      margin-bottom: .14rem;
      color: #242424;
      font-size: .14rem;
      line-height: .32rem;
      padding: 0 .1rem;
      border-radius: .16rem;
      background: #F5F9FA;

    }
  }
}